<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <view class="nav">
          <view class="nav_item" @click="change(item)" :class='currentIndex == item.value?"selected":""' v-for="item,index in typeList" :key="item.value">{{item.name}}</view>
        </view>
      </template>
      <view class="content">
        <view class="list" v-for="(item,index) in dataList">
          <view class="item">
            <view>状态：</view>
						<view style="color: #aa0000;" v-if="item.status == 0">未打款</view>
						<view style="color: #ffaa00;" v-else-if="item.status == 1">打款中</view>
						<view style="color: #ff0000;" v-else-if="item.status == 2">打款失败</view>
            <view style="color: #07c160;" v-else-if="item.status == 10">打款成功</view>
          </view>
          <view class="item">
						<view>订单号：</view>
						<view>{{item.orderNo}}</view>
          </view>
          <view class="item">
						<view>交易号：</view>
						<view class="u-line-1" style="width: 80%;">{{item.transactionNo}}</view>
          </view>
          <view class="item">
            <view>提现金额：</view>
            <view style="color: #ff0000;">{{item.amount}}元</view>
          </view>
          <view class="item">
            <view>申请时间：</view>
            <view>{{item.createTime}}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
	<!-- 红包弹框组件 -->
	<redPacket/>
</template>

<script setup>
  import { ref } from "vue"
	import { GetRewardRecords } from "@/api/general.js"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	onLoad((options) => {
		if(options.flag) {
			currentIndex.value = options.flag
		}
	})
	
  let typeList = ref([{
      name: '师徒收益',
      value: 1
    },
    {
      name: '月排行奖励',
      value: 2
    },
    {
      name: '金币兑换',
      value: 3
    },
    {
      name: '任务奖励',
      value: 4
    }
  ])
  let currentIndex = ref(1)
  let dataList = ref([])
  let paging = ref(null)

  const change = (item) => {
    if (currentIndex.value != item.value) {
      currentIndex.value = item.value
      paging.value.reload()
    }
  }
  const queryList = async (PageIndex, PageSize) => {
    let params = {
      PageIndex,
      PageSize,
      Condition: {
				RecordType: currentIndex.value
			}
    }
    let res = await GetRewardRecords(params)
    paging.value.complete(res.items)
  }
</script>

<style lang="scss">
  .container {
    .nav {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: white;

      .nav_item {
        width: fit-content;
        height: fit-content;
				padding: 10rpx 12rpx;
        border-radius: 10rpx;
        text-align: center;
        font-size: 28rpx;
        background-color: #fafbfc;
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
        color: #b4b4b4;
      }

      .selected {
        background-color: rgb(9, 172, 254);
        box-shadow: 0px 4px 12px 0px rgba(9, 172, 254, 0.41);
        color: #ffffff;
      }
    }

    .content {
      width: 690rpx;
      margin: 20rpx auto;

      .list {
        background: #FFFFFF;
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 20rpx;

        .item {
          display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-bottom: 20rpx;
        }
      }
    }
  }
</style>